<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>投稿管理</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../static/css/skins.css">
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.all.js"></script>
	<script type="text/javascript" charset="utf-8" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
	<style type="text/css">
		/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
		}

		.el-main {
			padding: 4px;
		}

		.el-icon-search {
			color: #409EFF;
		}

		.el-icon-refresh-right {
			color: #409EFF;
		}

		[v-cloak] {
			display: none;
		}

		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
</head>

<body>
	<el-container id="app" v-cloak>
		<el-main>
			<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
				size="mini" style="height: 35px" @submit.native.prevent>
				<el-form-item label="投稿标题">
					<el-input v-model="queryData.theme" clearable placeholder="请输入投稿标题"></el-input>
				</el-form-item>
				<el-form-item label="发表人">
					<el-input v-model="queryData.sendUser" clearable placeholder="请输入发表人"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
					<el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
				</el-form-item>
			</el-form>

			<vxe-grid border ref="xGrid" @page-change="handlePageChange" resizable show-overflow
				highlight-current-row="true" keep-source :height="tableHeight" size="mini" :checkbox-config="tableRadio"
				:pager-config="tablePage" :data="tableData" :header-cell-style="{'text-align':'center'}"
				:loading="dataLoading" :toolbar="tableToolbar" :export-config="tableExport"
				@cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}"
				@toolbar-button-click="toolbarButtonClickEvent" :sort-config="{remot:true}"
				@sort-change="tableSortChange">
				<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
				<vxe-table-column field="id" title="序号" width="60" align="center">
				</vxe-table-column>
				<vxe-table-column field="theme" title="投稿标题" align="left" width="300">
				</vxe-table-column>
				<vxe-table-column field="content" title="投稿内容" align="left">
				</vxe-table-column>
				<vxe-table-column field="sendUser" title="发表人" align="center" width="100">
				</vxe-table-column>
				<vxe-table-column field="coverImg" title="封面图片" width="120" width="100">
					<template #default="{ row }">
						<el-popover placement="left" title trigger="hover">
							<img v-if="row.coverImg" :src="row.coverImg" :alt="row.coverImg"
								style="max-height: 500px;max-width: 500px" />
							<img slot="reference" :src="row.coverImg" style="width: 100px;">
						</el-popover>
					</template>
				</vxe-table-column>
				<vxe-table-column title="审核状态" width="120" align="center">
					<template #default="{ row }">
						<div :style="row.isEnd ? 'color:#00BD62' : 'color:red'">{{ row.isEnd ? '审核完成' : '待审核'}}</div>
					</template>
				</vxe-table-column>
				<vxe-table-column field="cUser" title="创建人" align="center" width="100">
				</vxe-table-column>
				<vxe-table-column field="cTime" title="创建时间" align="center" :formatter="formatDate" width="170">
				</vxe-table-column>
			</vxe-grid>

			<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800" resize
				id="formWindow">
				<el-form :model="formData" v-loading="submitLoading" :rules="formRules" ref="formData"
					label-width="120px" label-position="right" size="mini">
					<template v-if="visible===true">
						<el-form-item label="ID" prop="id">
							<el-input v-model="formData.id"></el-input>
						</el-form-item>
					</template>
					<el-form-item label="投稿标题" prop="theme">
						<el-input type="text" v-model="formData.theme" placeholder="" maxlength="200"
							show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="投稿内容" prop="content">
						<div id="contentEditor" v-model="formData.content"></div>
					</el-form-item>
					<el-form-item label="发表人" prop="sendUser">
						<el-input type="text" v-model="formData.sendUser" placeholder="" maxlength="200"
							show-word-limit></el-input>
					</el-form-item>
					<el-form-item label="封面图片" prop="coverImg">
						<el-upload class="avatar-uploader" :action="this.uploadUrl" :show-file-list="false"
							:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item style="text-align: right;">
						<el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
							:disabled="disabled" v-cloak>保存</el-button>
						<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('formData')" v-cloak>
							重置
						</el-button>
						<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')" v-cloak>
							退出
						</el-button>
					</el-form-item>
				</el-form>
			</vxe-modal>
		</el-main>
	</el-container>
</body>
<script type="text/javascript">
	window.onload = function () {
		var main = {
			data () {
				return {
					//排序
					prop: '',
					order: '',
					dataLoading: false,
					loading: false,
					disabled: false,
					visible: false,
					tableHeight: '100%',
					departOptions: [],
					tableData: [],
					contentEditor: null,
					uploadUrl: "",
					imageUrl: "",
					tablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 30,
						align: 'left',
						pageSizes: [30, 50, 100, 200],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					tableToolbar: {
						id: 'toolbar',
						size: 'mini',
						perfect: true,
						buttons: [],
					},
					tableExport: {
						filename: 'export',
						sheetName: 'Sheet1',
						type: 'xlsx',
						// 自定义类型
						types: ['xlsx', 'csv', 'html', 'xml', 'txt']
					},
					tableRadio: {
						trigger: 'row',
						highlight: true
					},
					submitLoading: false,
					selectRow: null,
					showEdit: false,
					queryData: {
						theme: "",
						content: "",
						sendUser: ""
					},
					formData: {
						id: "",
						theme: "",
						content: "",
						sendUser: "",
						coverImg: ""
					},
					formRules: {
						theme: [{
							required: true,
							message: '请输入投稿标题'
						},
						{
							min: 1,
							max: 100,
							message: '长度在1到100个字符'
						}
						],
						content: [{
							required: true,
							message: '投稿内容不能为空'
						}],
						coverImg: [{
							required: true,
							message: '封面图片不能为空'
						}]
					}
				}
			},
			created () {
				this.findList();
				this.getBtn();
				this.uploadUrl = window.curl + '/attach/uploadAtt';
				UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
				UE.Editor.prototype.getActionUrl = function (action) {
					if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
						let path = window.curl + '/attach/uploadUeditorAtt';
						return path; //调用后台接口上传图片   
					} else {
						return this._bkGetActionUrl.call(this, action);
					}
				}
				this.contentEditor = UE.getEditor('contentEditor', {
					initialFrameWidth: '99%',
					initialFrameHeight: 250,
					elementPathEnabled: false, //删除元素路径
					pasteplain: true,
					/* 纯文本粘贴 */
					autoHeightEnabled: true,
					/* 启用右侧滚轮,默认是true自动长高模式*/
					autoFloatEnabled: true
				});
			},
			mounted () {
				this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
			},
			methods: {
				searchEvent () {
					this.findList();
				},
				searchEventA () {
					this.queryData.theme = "";
					this.queryData.content = "";
					this.queryData.sendUser = "";
					this.findList();
				},
				getTreeData (data) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].children.length < 1) {
							// children若为空数组，则将children设为undefined
							data[i].children = undefined;
						} else {
							// children若不为空数组，则继续 递归调用 本方法
							this.getTreeData(data[i].children);
						}
					}
					return data;
				},
				getBtn () {
					this.tableToolbar.buttons = []
					let bts = Tool.getButton()
					let btns = []
					this.tableToolbar.buttons = btns.concat(bts)
				},
				//分页
				handlePageChange ({
					currentPage,
					pageSize
				}) {
					this.tablePage.currentPage = currentPage
					this.tablePage.pageSize = pageSize
					this.findList()
				},
				findList () {
					let queryParams = Object.assign({
						page: this.tablePage.currentPage,
						rows: this.tablePage.pageSize,
						theme: this.queryData.theme,
						content: this.queryData.content,
						sendUser: this.queryData.sendUser,
						//dataType: 1,  //1-管理端   2-门户/手机端
						istype: 2,//1-宣传稿，2-志愿者投稿，不传或者其他就是所有信息列表
					});
					this.dataLoading = true;
					var object = this;
					webApi("/article/list", "post", queryParams, function (data) {
						object.tableData = data.data.list;
						object.tablePage.total = data.data.total
						object.dataLoading = false;
						// object.getDepartOptions();
					}, function (data) {
						object.tableData = [];
						object.tablePage.total = 0
						object.dataLoading = false;
					});
				},
				getDepartOptions () {
					let that = this;
					webApi('/org/getOrgOptions', 'post', {}, function (data) {
						that.departOptions = that.getTreeData(data.data);
					}, function (xhr, type, errorThrown) { })
				},
				searchEvent (formName, acType) {
					if (acType == 0) {
						this.queryData.theme = "";
						this.queryData.content = "";
						this.queryData.sendUser = "";
					}
					this.tablePage.currentPage = 1
					this.findList()
				},
				formatDate ({
					cellValue
				}) {
					return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
				},
				toolbarButtonClickEvent ({
					code
				}, event) {
					switch (code) {
						case 'reset':
							this.searchEvent(this.queryData, 0)
							break;
						case 'search':
							this.searchEvent(this.queryData, 1)
							break;
						case 'btnInsert':
							var row = this.$refs.xGrid.getCheckboxRecords();
							if (row) {
								var parentCode = row.parentMenuId;
							} else {
								var parentCode = "";
							}
							this.insertEvent(parentCode);
							break;
						case 'btnUpdate':
							if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
								let row = this.$refs.xGrid.getCheckboxRecords()
								this.editEvent(row[0]);
							} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
								this.$message({
									message: "数据大于一条，无法修改",
									type: 'warning',
									center: true
								});
							} else {
								this.$message({
									message: "请选择一行数据",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnDelete':
							var row = this.$refs.xGrid.getCheckboxRecords();
							// console.log(row)
							if (row.length > 0) {
								this.removeEvent(row);
							} else {
								this.$message({
									message: "请选择需要删除的数据行",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnExport':
							this.$refs.xGrid.exportData({
								filename: '菜单列表',
								sheetName: 'Sheet1',
								type: 'xlsx'
							});
							break;
					}
				},
				nameSelected (value) {
					if (value) {
						// console.log(this.$refs.companyNameCas.getCheckedNodes()[0]);
						this.formData.name = this.$refs.companyNameCas.getCheckedNodes()[0].label;
					}
				},
				insertEvent () {
					this.formData = {
						id: "",
						theme: "",
						content: "",
						sendUser: "",
						coverImg: ""
					};
					this.imageUrl = "";
					this.contentEditor.setContent("");
					this.selectRow = null;
					this.showEdit = true;
				},
				submitEvent (formName) {
					console.log(this.formData)
					this.formData.content = UE.getEditor('contentEditor').getContent()
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.submitLoading = true;
							this.disabled = true;

							let params = Object.assign({}, this.formData, {
								type: 1
							});
							let that = this;
							webApi('/article/save', 'post', params, function (data) {
								that.submitLoading = false;
								if (data.code == 200) {
									that.findList();
									that.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) {
								that.submitLoading = false;
							});

						} else {
							return false;
						}
					});
				},
				resetEvent (formName) {
					this.formData = {
						id: "",
						theme: "",
						content: "",
						sendUser: "",
						coverImg: ""
					};
					this.imageUrl = "";
					this.contentEditor.setContent("");
					this.$refs[formName].resetFields();
				},
				closeEvent (formName) {
					this.$refs[formName].resetFields();
					this.showEdit = false;

				},
				editEvent (row) {
					this.formData = {
						id: row.id,
						theme: row.theme,
						content: row.content,
						sendUser: row.sendUser,
						coverImg: row.coverImg
					};
					this.imageUrl = row.coverImg
					this.contentEditor.setContent(this.formData.content);
					this.selectRow = row;
					this.showEdit = true;

				},
				removeEvent (row) {
					this.$XModal.confirm('您确定要删除该数据?').then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;
							let that = this
							let ids = ""
							row.forEach(item => {
								ids += item.id + ","
							});
							ids = ids.substring(0, ids.length - 1);
							let params = Object.assign({
								id: ids
							});
							webApi('/article/del', 'get', params, function (data) {
								if (data.code == 200) {
									that.findList()
									that.$message({
										// message: data.msg,
										message: "删除成功!",
										type: 'success',
										center: true
									});
									that.showEdit = false;
								} else {
									that.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
								that.disabled = false;
							}, function (xhr, type, errorThrown) { });
							this.submitLoading = false;
						}
					});
				},
				handleAvatarSuccess (res, file) {
					console.log(res)
					if (res.code === 200) {
						this.formData.coverImg = res.data.url
						this.imageUrl = URL.createObjectURL(file.raw);
					}
				},
				beforeAvatarUpload (file) {
					const isJPG = file.type === 'image/jpeg';
					const isPNG = file.type === 'image/png';
					const isLt2M = file.size / 1024 / 1024 < 3;
					if (!isJPG && !isPNG) {
						this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 3MB!');
					}
					return (isJPG || isPNG) && isLt2M;
				},
				cellDBLClickEvent ({
					row
				}) {
					this.editEvent(row);
				},
				checkColumnMethod ({
					column
				}) {
					if (['companyNo', 'name'].includes(column.property)) {
						return false
					}
					return true
				},
				//表头列排序
				tableSortChange (column, prop, order) {
					//点击排序按钮后拿到column.order，可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据
					console.log(column + '---' + column.prop + '---' + column.order)
					this.order = column.order;
					this.prop = column.prop;
					this.findList();
				}
			}
		};

		var vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>